<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析平台</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f4f4f4;
        }
        .container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            color: white;
            padding: 20px;
        }
        .sidebar h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        .sidebar ul li {
            margin: 10px 0;
        }
        .sidebar ul li a {
            color: white;
            text-decoration: none;
            font-size: 18px;
        }
        .sidebar ul li a:hover {
            color: #3498db;
        }
        .main-content {
            flex: 1;
            padding: 20px;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        .chart-box {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 15px;
            height: 300px;
        }
        .chart-box h3 {
            margin: 0 0 10px;
            font-size: 18px;
            text-align: center;
        }
        .chart {
            width: 100%;
            height: 250px;
        }
        .footer {
            text-align: center;
            padding: 20px;
            background-color: #2c3e50;
            color: white;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>菜单选项</h2>
            <ul>
                <li><a href="#">数据概览</a></li>
                <li><a href="#">用户分析</a></li>
                <li><a href="#">销售报表</a></li>
                <li><a href="#">系统设置</a></li>
                <li><a href="#">退出登录</a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="grid-container">
                <div class="chart-box">
                    <h3>销售趋势</h3>
                    <div id="chart1" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>用户增长</h3>
                    <div id="chart2" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>产品分布</h3>
                    <div id="chart3" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>区域销售</h3>
                    <div id="chart4" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>访问来源</h3>
                    <div id="chart5" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>订单状态</h3>
                    <div id="chart6" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>年龄分布</h3>
                    <div id="chart7" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>收入对比</h3>
                    <div id="chart8" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>转化率</h3>
                    <div id="chart9" class="chart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        © 2023 公司名称 版权所有
    </div>

    <script>
        // 模拟后端接口数据
        async function fetchData(chartType) {
            // 这里模拟从后端获取数据，实际中应替换为真实API调用
            const mockData = {
                line: {
                    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    series: [{ name: '销售额', data: [820, 932, 901, 934, 1290, 1330] }]
                },
                bar: {
                    xAxis: ['产品A', '产品B', '产品C', '产品D'],
                    series: [{ name: '销量', data: [120, 200, 150, 80] }]
                },
                pie: {
                    series: [
                        { name: '产品A', value: 400 },
                        { name: '产品B', value: 300 },
                        { name: '产品C', value: 300 },
                        { name: '产品D', value: 200 }
                    ]
                },
                donut: {
                    series: [
                        { name: '直接访问', value: 335 },
                        { name: '搜索引擎', value: 310 },
                        { name: '社交媒体', value: 234 },
                        { name: '其他', value: 135 }
                    ]
                },
                area: {
                    xAxis: ['周一', '周二', '周三', '周四', '周五'],
                    series: [{ name: '访问量', data: [150, 230, 224, 218, 135] }]
                },
                stackedBar: {
                    xAxis: ['Q1', 'Q2', 'Q3', 'Q4'],
                    series: [
                        { name: '线上', data: [320, 332, 301, 334] },
                        { name: '线下', data: [120, 132, 101, 134] }
                    ]
                },
                radar: {
                    indicator: [
                        { name: '销售', max: 100 },
                        { name: '满意度', max: 100 },
                        { name: '复购率', max: 100 }
                    ],
                    series: [{ name: '产品A', value: [80, 90, 70] }]
                },
                funnel: {
                    series: [
                        { name: '访问', value: 1000 },
                        { name: '注册', value: 800 },
                        { name: '下单', value: 500 },
                        { name: '支付', value: 300 }
                    ]
                },
                heatmap: {
                    xAxis: ['周一', '周二', '周三', '周四', '周五'],
                    yAxis: ['上午', '下午', '晚上'],
                    series: [
                        [0, 0, 5], [0, 1, 1], [0, 2, 0],
                        [1, 0, 3], [1, 1, 2], [1, 2, 4],
                        [2, 0, 1], [2, 1, 3], [2, 2, 6],
                        [3, 0, 7], [3, 1, 3], [3, 2, 2],
                        [4, 0, 1], [4, 1, 3], [4, 2, 5]
                    ]
                }
            };
            return mockData[chartType];
        }

        // 初始化图表
        async function initChart(chartId, chartType, title) {
            const chartDom = document.getElementById(chartId);
            const myChart = echarts.init(chartDom);
            const data = await fetchData(chartType);

            let option;
            switch (chartType) {
                case 'line':
                    option = {
                        title: { text: title, left: 'center' },
                        xAxis: { type: 'category', data: data.xAxis },
                        yAxis: { type: 'value' },
                        series: data.series.map(s => ({
                            name: s.name,
                            type: 'line',
                            data: s.data
                        }))
                    };
                    break;
                case 'bar':
                    option = {
                        title: { text: title, left: 'center' },
                        xAxis: { type: 'category', data: data.xAxis },
                        yAxis: { type: 'value' },
                        series: data.series.map(s => ({
                            name: s.name,
                            type: 'bar',
                            data: s.data
                        }))
                    };
                    break;
                case 'pie':
                    option = {
                        title: { text: title, left: 'center' },
                        series: [{
                            type: 'pie',
                            data: data.series,
                            radius: '50%'
                        }]
                    };
                    break;
                case 'donut':
                    option = {
                        title: { text: title, left: 'center' },
                        series: [{
                            type: 'pie',
                            data: data.series,
                            radius: ['40%', '70%']
                        }]
                    };
                    break;
                case 'area':
                    option = {
                        title: { text: title, left: 'center' },
                        xAxis: { type: 'category', data: data.xAxis },
                        yAxis: { type: 'value' },
                        series: data.series.map(s => ({
                            name: s.name,
                            type: 'line',
                            areaStyle: {},
                            data: s.data
                        }))
                    };
                    break;
                case 'stackedBar':
                    option = {
                        title: { text: title, left: 'center' },
                        xAxis: { type: 'category', data: data.xAxis },
                        yAxis: { type: 'value' },
                        series: data.series.map(s => ({
                            name: s.name,
                            type: 'bar',
                            stack: 'total',
                            data: s.data
                        }))
                    };
                    break;
                case 'radar':
                    option = {
                        title: { text: title, left: 'center' },
                        radar: { indicator: data.indicator },
                        series: [{
                            type: 'radar',
                            data: data.series
                        }]
                    };
                    break;
                case 'funnel':
                    option = {
                        title: { text: title, left: 'center' },
                        series: [{
                            type: 'funnel',
                            data: data.series,
                            width: '60%'
                        }]
                    };
                    break;
                case 'heatmap':
                    option = {
                        title: { text: title, left: 'center' },
                        xAxis: { type: 'category', data: data.xAxis },
                        yAxis: { type: 'category', data: data.yAxis },
                        visualMap: {
                            min: 0,
                            max: 10,
                            calculable: true,
                            orient: 'vertical',
                            right: 10
                        },
                        series: [{
                            type: 'heatmap',
                            data: data.series
                        }]
                    };
                    break;
            }

            myChart.setOption(option);
        }

        // 初始化所有图表
        initChart('chart1', 'line', '销售趋势');
        initChart('chart2', 'bar', '用户增长');
        initChart('chart3', 'pie', '产品分布');
        initChart('chart4', 'stackedBar', '区域销售');
        initChart('chart5', 'donut', '访问来源');
        initChart('chart6', 'funnel', '订单状态');
        initChart('chart7', 'radar', '年龄分布');
        initChart('chart8', 'area', '收入对比');
        initChart('chart9', 'heatmap', '转化率');
    </script>
</body>
</html>